<div class="content-warp" style="height:700px;">
  <div class="content-header">
    <i class="anticon anticon-left-circle-o" (click)="goBack()"></i>
    <span class="content-title">新建自定义模板</span>
  </div>
  <div class="content-body">
    <nz-spin [nzSpinning]="_isSpinning">
      <form nz-form #formdata [formGroup]="validateForm" enctype="multipart/form-data">
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>自定义模板名称：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('name')">
            <div class="p-pr" style="width:600px;">
              <nz-input
                formControlName="name"
                placeholder="请输入自定义模板名称"
                class="ant-input ng-pristine ng-valid ng-touched"
                style="width:600px;" maxlength="30"></nz-input>
              <div style="position: absolute;right: 8px;bottom: 0px;color: #999;">
                {{30-(validateForm.controls.name.value?validateForm.controls.name.value.length:0) }}
              </div>
            </div>
            <div nz-form-explain
                 *ngIf="getFormControl('name').dirty&&getFormControl('name').hasError('required')">
              请输入自定义模板名称
            </div>
            <div nz-form-explain
                 *ngIf="getFormControl('name').dirty&&getFormControl('name').hasError('maxlength')">
              自定义模板名称不能超过30个字
            </div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>排序：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('sort')">
            <nz-input-number
              formControlName="sort"
              [nzPlaceHolder]="'请输入排序'"
              [nzStep]="1"
              [nzSize]="'large'"
            >
            </nz-input-number>
            <div nz-form-explain *ngIf="getFormControl('sort').dirty&&getFormControl('sort').hasError('required')">
              请输入排序
            </div>
            <div nz-form-explain *ngIf="getFormControl('sort').dirty&&getFormControl('sort').hasError('min')">不能低于0
            </div>
            <div nz-form-explain *ngIf="getFormControl('sort').dirty&&getFormControl('sort').hasError('max')">不能超过99
            </div>
            <div nz-form-explain *ngIf="getFormControl('sort').dirty&&getFormControl('sort').hasError('notInteger')">
              请输入整数
            </div>
          </div>
        </div>
        <!--<div nz-form-item nz-row>-->
          <!--<div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>模板图片：</div>-->
          <!--<div nz-form-control nz-col [nzSm]="14" [nzXs]="24">-->
            <!--<div>-->
              <!--<app-upload [(fileList)]="fileList" [(piclist)]="picList" [picSizeInfo]="picSizeInfo"-->
                          <!--(piclistChange)="fileChange(true)"-->
                          <!--(fileListChange)="fileChange(true)"></app-upload>-->
            <!--</div>-->
            <!--<div nz-form-explain *ngIf="picError">请至少上传一张图片</div>-->
          <!--</div>-->
        <!--</div>-->

        <!--<div nz-form-item nz-row>-->
          <!--<div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>是否启用：</div>-->
          <!--<div nz-form-control nz-col [nzSm]="14" [nzXs]="24">-->
            <!--<div>-->
              <!--<nz-switch formControlName="default"></nz-switch>-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->

        <!--<div nz-form-item nz-row>-->
          <!--<div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>自定义模板备注：</div>-->
          <!--<div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('introduce')">-->
            <!--<div class="p-pr" style="width:300px;">-->
            					            	<!--<textarea-->
                                      <!--formControlName="introduce"-->
                                      <!--placeholder="请输入自定义模板备注"-->
                                      <!--class="ant-input ng-pristine ng-valid ng-touched"-->
                                      <!--rows="2"-->
                                      <!--style="width:300px;" maxlength="30"></textarea>-->
              <!--<div style="position: absolute;right: 8px;bottom: 0px;color: #999;">-->
                <!--{{30-(validateForm.controls.introduce.value?validateForm.controls.introduce.value.length:0) }}-->
              <!--</div>-->
            <!--</div>-->
            <!--<div nz-form-explain-->
                 <!--*ngIf="getFormControl('introduce').dirty&&getFormControl('introduce').hasError('required')">-->
              <!--请输入自定义模板备注-->
            <!--</div>-->
            <!--<div nz-form-explain-->
                 <!--*ngIf="getFormControl('introduce').dirty&&getFormControl('introduce').hasError('maxlength')">-->
              <!--自定义模板备注不能超过30个字-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->

        <div nz-form-item nz-row style="margin-bottom:8px;">
          <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="7">
            <button nz-button [nzSize]="'large'" [nzType]="'primary'" [nzLoading]="submitStatus"
                    (click)="_submitForm()">确 认
            </button>
            <button nz-button [nzSize]="'large'" [nzType]="'default'" type="button" (click)="goBack()"
                    style="margin-left: 20px">取 消
            </button>
          </div>
        </div>
      </form>
    </nz-spin>
  </div>
</div>
